<div class="clr-row">
  <div class="clr-col-12	clr-col-sm-12	clr-col-md-12	clr-col-lg-9	clr-col-xl-8">
    <div class="clr-row">
      <div class="clr-col-12	clr-col-sm-12	clr-col-md-6	clr-col-lg-6	clr-col-xl-6">
        <h6>待办</h6>
        <div
          cdkDropList
          #backLogList="cdkDropList"
          [cdkDropListData]="ms.game.researchManager.backLog"
          [cdkDropListConnectedTo]="[todoList]"
          class="drag-list myBg"
          (cdkDropListDropped)="drop($event)"
        >
          <app-job
            *ngFor="
              let res of ms.game.researchManager.backLog;
              trackBy: getResId
            "
            [job]="res"
            [showDetails]="ms.showDetails"
            cdkDrag
          >
          </app-job>
        </div>
      </div>
      <div class="clr-col-12	clr-col-sm-12	clr-col-md-6	clr-col-lg-6	clr-col-xl-6">
        <h6>进行中</h6>
        <div
          cdkDropList
          #todoList="cdkDropList"
          [cdkDropListData]="ms.game.researchManager.toDo"
          [cdkDropListConnectedTo]="[backLogList]"
          class="drag-list myBg"
          (cdkDropListDropped)="drop($event)"
        >
          <app-job
            *ngFor="let res of ms.game.researchManager.toDo; trackBy: getResId"
            [job]="res"
            [showDetails]="ms.showDetails"
            cdkDrag
          >
          </app-job>
        </div>
      </div>
    </div>
  </div>

  <div class="clr-col-12	clr-col-sm-12	clr-col-md-12	clr-col-lg-3	clr-col-xl-4">
    <p>
      未使用的计算被转换为研究。 对待办的研究不会被研究。 <br />研究加成:
      <app-formatted-quantity [quantity]="resMulti"></app-formatted-quantity
      ><br />
      <span>计算正在增加: </span>
      <app-polynom [c]="ms.game.resourceManager.computing.c"> </app-polynom>
      <br />
      研究 /秒:
      <app-formatted-quantity [quantity]="resPerSec"></app-formatted-quantity>
    </p>

    <button class="btn btn-outline" (click)="sortPrice()">
      按价格排序
    </button>
    <button class="btn btn-outline" (click)="allBacklog()">
      全部待办
    </button>
    <button class="btn btn-outline" (click)="allToDo()">
      全部进行中
    </button>
    <button class="btn btn-outline" (click)="bonus = true">
      显示奖励
    </button>

    <br />
    <clr-toggle-container>
      <clr-toggle-wrapper>
        <input
          type="checkbox"
          clrToggle
          name="showDetails"
          [(ngModel)]="ms.showDetails"
        />
        <label>显示详情</label>
      </clr-toggle-wrapper>
    </clr-toggle-container>

    <clr-toggle-container>
      <clr-toggle-wrapper>
        <input
          type="checkbox"
          clrToggle
          name="autoSort"
          [(ngModel)]="ms.game.researchManager.autoSort"
        />
        <label>自动排序</label>
      </clr-toggle-wrapper>
    </clr-toggle-container>
    <div class="clr-subtext-wrapper">
      <span class="clr-subtext">自动排序:完成后进行排序研究</span>
    </div>
  </div>
</div>

<clr-modal [(clrModalOpen)]="infoModal" [clrModalSize]="'lg'">
  <h3 class="modal-title">实验室</h3>
  <div class="modal-body">
    <p>ToDo</p>
  </div>
</clr-modal>

<!-- Bonus Modal -->
<clr-modal [(clrModalOpen)]="bonus">
  <h3 class="modal-title">研究奖励</h3>
  <div class="modal-body">
    <app-bonus-view [bonus]="ms.game.researchBonus"></app-bonus-view>
  </div>
</clr-modal>
